<template>
    <div >
        <waterfall  id="myDIV"
            :line-gap="250"
            :max-line-gap="360"
            :min-line-gap="200"
            :fixed-height="true"
            :watch="items"
            align="center"
        >
            <!-- each component is wrapped by a waterfall slot -->
            <waterfall-slot
                    v-for="(item, index) in items"
                    :width="200"
                    :height="220"
                    :order="index"
                    :key="item.id"
                    move-class="item-move"
            >
                <div  @dblclick.stop="dblNextClick">
                    <v-usercomp
                            :item="item"
                            :index="index"
                            class="item"
                            :backSelectItems="selectItems"
                            :backItems="getCurrentSelectItems"
                            :viewClick="function(){info(item)}"
                            :currentRadio ="currentRadio"
                    >
                        <div class="role">
                            <span>{{item.tel||"暂无"}}</span>
                        </div>
                    </v-usercomp>
                </div>

            </waterfall-slot>
        </waterfall>
    </div>

</template>


<script>
    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import vUsercomp from '../../common/UserComp.vue';
    import * as type from '../../../store/types';
    export default {
        name:'keepalive0',
        components: {
            vUsercomp,Waterfall, WaterfallSlot
        },
        props: {
            param: '',
            dblNextClick:{       //点击跳转下一步
                type:Function,
//                default:function(){alert("并未实现查看接口");},
                required:false
            }
        },
        data: function () {
            return {
                loading: true,
                allItems: [],
                items: [],
                rows: 16,//显示数量
                page: 1,//当前页数
                totalPage: 1,//总页数
                goodItem: [],
                list:[],
                selectMember:{},
                radio:'',
                rows:20,
                page:1,
                static_url: this.$cfg.static_url + "/",
                selectItems: [],
                isMultiselect: false,
                currentRadio: {index:-1},
            }
        },
        watch: {
            param(val){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loading = true;
                this.loadMore();
            }
        },
        created:function () {
            this.loadMore();
        },
        activated:function () {
            this.$$("#content").scrollTop(0);
            this.$$(window).resize();
        },
        deactivated:function () {
            this.$$("#content").off('scroll');
        },
        mounted: function () {
            console.log("--------------mounted")
            let self = this;
            this.$$("#content").on('scroll', function (e) {
                var scrollTop = self.$$("#content").scrollTop();
                var innerHeight = self.$$("#content").innerHeight();
                var scrollHeight = self.$$("#content").scrollHeight();
                console.log(scrollTop)
                console.log(innerHeight)
                console.log(scrollHeight)
                if (scrollTop + innerHeight >= scrollHeight) {
                    self.page++;
                    if (self.page > self.totalPage) {
                        return;
                    }
                    self.loading = true;
                    self.loadMore();
                    console.log('*(******************' + self.page)
                }
            });

            document.getElementById("myDIV").addEventListener('wheel', function (e) {
                if (e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0) {
                    console.log(e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0)
                    self.page++;
                    self.loading = true;
                    self.loadMore();
                }
            });
            this.$$(window).resize();
        },
        methods: {
            loadMore: function () {
                let self = this;
                if (this.page <= this.totalPage) {
                    this.$axioxs.get("/user/?states=1&kindCode=20&rows=" + this.rows + "&page=" + this.page + "&param=" + this.param)
                        .then(function (res) {
                                self.totalPage = res.data.totalPage;
                                self.allItems = res.data.records;
                                self.allItems.forEach(item => {
                                    item.height = 160;
                                    item.width = 200;
                                    self.items.push(item);
                                });
                                self.loading = false;
                            },
                            (res) => {
                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            });
                } else {
                    this.allData = true;
                    this.loading = false;
                }
            },
            getCurrentSelectItems: function (items) {
                console.log("==================>")
                console.log(items)
            },

            info: function (item) {
                console.log(item)
            },
            getCurrentSelectItems: function (items) {
                console.log("==================>")
                console.log(items)
                this.selectMember=items;
                this.$emit('transfer', items)
            },
        },

    }

</script>
<style scoped>

    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }
</style>